<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 传给v-bing一个class对象，以动态的切换class -->
        <div v-bind:class="{ active:isActive }">
            我也不知道该写点什么东西
        </div>
        <hr>

        <!-- 可以在对象中传入更多字段来动态切换多个 clas -->
        <div
            class="static"
            v-bind:class="{ active: isActive, 'text-danger': hasError }"
        >
        陈平安，岁岁平安
        </div>
        <hr>

        <!-- 绑定的数据对象不必内联定义在模板里： -->
        <div v-bind:class="classObject">
            小鼻涕虫顾粲
        </div>
        <hr>

        <!-- 可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式 -->
        <div v-bind:class="classObject">
            少年国师崔东山
        </div>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    const rw = new Vue({
        el:"#app",
        data:{
            isActive:true,
            hasError: false,
            classObject: {
                active: true,
                'text-danger': false
            }
        },
        computed: {
            classObject: function () {
                return {
                active: this.isActive && !this.error,
                'text-danger': this.error && this.error.type === 'fatal'
                }
            }
            }
    })
</script>
</html>